import React from 'react'
import {View,Text,FlatList,Image,StyleSheet,TouchableOpacity} from 'react-native'
export default class Friend extends React.Component{



    constructor(props){
        super(props)
        this.state = {
           friendList:[
               {id:1,name:"周杰",avatar:'http://wx.qlogo.cn/mmopen/vi_32/Q0j4TwGTfTJI3gMNKKsSQichjViaoibnZuHqzTRkhGngI0vAOMMA3mID1Y2mab7EFcn46uNO8dyAMnFWOgUMfVibhQ/0'},
               {id:2,name:"黄飞",avatar:'http://wx.qlogo.cn/mmopen/vi_32/n6uaXic9MFiaa2WFQicqjnpAD3kC5uuECXtqUKvPd0ibicKJSFgyUCceywgKerGjJcEWjpbRHLckquxux3UbmUj3J1A/0'}
           ]
        }
    }

    render(){
        return (
            <FlatList
                data={this.state.friendList}
                renderItem={this._renderItem}
                keyExtractor={(item)=>`${item.id}`}
            />
        )
    }

    _renderItem = ({item})=> (
        //这里为什么不直接传递ID到方法  是为了减少不必要的子组件更新
        <MyListItem item={item} onPressItem={this._onPress}  />
    )


    _onPress = (item) => {
        console.log('父组件被点击了'+item.id)
        this.props.actions.CHAT_REQUEST(item.id)
        this.props.navigation.navigate('Chat',{
            chatUserId:item.id,
            chatUserName:item.name
        })
    }

}


class MyListItem extends React.PureComponent {
    _onPress = () => {
        console.log('子组件点击方法')
        this.props.onPressItem(this.props.item);
    };

    render() {
        return (
            <TouchableOpacity onPress={this._onPress} style={styles.itemView}>
                <Image style={styles.itemImage} source={{uri:this.props.item.avatar}}/>
                <Text>{this.props.item.name}</Text>
            </TouchableOpacity>
        );
    }
}

const styles = StyleSheet.create({
    itemView:{
        flexDirection: 'row',
        justifyContent: 'flex-start',
        alignItems: 'center',
    },
    itemImage:{
        width: 50,
        height: 50
    }
})
